<template>
  <div class="detail-container">
    <div>
      <div class="title">
        网关基本信息
      </div>
      <div>
        <div class="content flex justify-between items-center">
          <div>
            <span>网关序列号:</span>
            <span>{{detailInfo.deviceSN}}</span>
          </div>
          <q-btn v-if="detailInfo.deviceSN" flat dense color="primary"  v-clipboard:copy="detailInfo.deviceSN"  v-clipboard:success="onCopy">
            复制
          </q-btn>
        </div>
        <div class="content">
          <span>网关型号:</span>
          <span>{{detailInfo.productName}}</span>
        </div>
        <div class="content">
          <span>最后部署时间:</span>
          <span>{{detailInfo.deployedDate}}</span>
        </div>
        <div class="content">
          <span>最后上线时间:</span>
          <span>{{detailInfo.lastOnlineTime}}</span>
        </div>
        <div class="content">
          <span>最后下线时间:</span>
          <span>{{detailInfo.lastOfflineTime}}</span>
        </div>
        <div class="content">
          <span>最后断电时间:</span>
          <span>{{detailInfo.offPowerTime}}</span>
        </div>
        <div class="content">
          <span>部署状态:</span>
          {{ detailInfo.deploymentStatus ? (deploymentStatusObj[detailInfo.deploymentStatus] || '--') : '--'  }}
        </div>
        <div class="content">
          <span>CPU架构:</span>
          <span>{{detailInfo.cpu}}</span>
        </div>
        <div class="content">
          <span>操作系统:</span>
          <span>{{detailInfo.os}}</span>
        </div>
        <div class="content">
          <span>网关版本:</span>
          <span>{{detailInfo.softwareVersion}}</span>
        </div>
      </div>

    </div>

    <div class="info" v-if="false">
      <div class="title">4G信息</div>
      <div class="content">
        <span>ICCID:</span>
        <span>{{lteInfo.iccid}}</span>
      </div>
      <div class="content">
        <span>IMEI:</span>
        <span>{{lteInfo.imei}}</span>
      </div>
      <div class="content">
        <span>IMSI:</span>
        <span>{{lteInfo.imsi}}</span>
      </div>
      <div class="content">
        <span>模组型号:</span>
        <span>{{lteInfo.imsi}}</span>
      </div>
      <div class="content">
        <span>模组版本号:</span>
        <span>{{lteInfo.imsi}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getLteInfo } from '../../../../boot/miot/details'
import { deploymentStatusObj } from '../list-components/plc-dialog/constant'

export default {
  name: 'gateway-detail',
  data () {
    return {
      deploymentStatusObj: deploymentStatusObj,
      lteInfo: {
        iccid: '',
        imei: '',
        imsi: ''
      }
    }
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    isOnline: {
      type: Boolean,
      default: false
    },
    detailInfo: {
      type: Object,
      default: () => ({
        wanType: '',
        productSN: '',
        productName: '',
        deviceSN: '',
        hwVersion: '',
        swVersion: '',
        software: '',
        hardware: '',
        lineStatus: '',
        pd: ''
      })
    }
  },
  watch: {
    boxId: {
      handler: function (val) {
        this.getLteInfo(val)
      },
      immediate: true
    }
  },
  computed: {
    prodId () {
      const boxId = this.detailInfo.boxId
      if (!boxId) return '---'
      try {
        const data = boxId.split('_')
        if (data.length === 1) return data[0]
        if (data.length === 2) return data[1]
      } catch (e) {
      }
      return '---'
    }
  },
  methods: {
    /**
     * 通过部署时间，计算运行时间
     * @param date
     */
    dateToDay (date) {
      if (!date) return '---'
      // // 判断是不是合法的日期，如果不是直接返回
      // if (/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/.test(date)) return '---'
      // // 计算部署时间距离现在时间差
      // const timestamp = new Date().getTime() - new Date(date + ' 00:00:00').getTime()
      // const second = timestamp / 1000
      // const days = Math.floor(second / 86400)
      // const hours = Math.floor((second % 86400) / 3600)
      // const minutes = Math.floor(((second % 86400) % 3600) / 60)
      // return `${days}天${hours}时${minutes}分`
    },

    async getLteInfo (boxId) {
      if (!boxId) return
      if (!this.isOnline) return
      const { data } = await getLteInfo(this.boxId)
      if (data) {
        this.lteInfo.iccid = data.iccid ? data.iccid : '--'
        this.lteInfo.imei = data.imei ? data.imei : '--'
        this.lteInfo.imsi = data.imsi ? data.imsi : '--'
      }
    },

    onCopy () {
      this.$message.success('复制成功')
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-container
  padding 20px
  height 364px

  .info
    margin-top 15px

  .title
    line-height 1
    font-size 16px
    font-weight 500
    color $primary
    margin-bottom 16px

  .content
    color #333333
    line-height 1.86
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
  .normal
    color $positive
  .abnormal
    color $warning
</style>
